<template>
  <ManualRelationMapping
    :labelWidth="labelWidth"
    :relation="relation"
    :formDefinition="formDefinition"
    :relationTargetFormDefinition="relationTargetFormDefinition"
    v-if="relation.relationType === RelationType.manual"/>
  <AutoRelationMapping
    :labelWidth="labelWidth"
    :relation="relation"
    :formDefinition="formDefinition"
    :relationTargetFormDefinition="relationTargetFormDefinition"
    v-else-if="relation.relationType === RelationType.auto"/>
  <DetailsRelationMapping v-else/>
</template>
<script>
import {createProps} from '@/utils';
import {createRelation, RelationType} from '@comp/hhd/design/relation/types';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import ManualRelationMapping from '@comp/hhd/design/relation/ManualRelationMapping/ManualRelationMapping.vue';
import AutoRelationMapping from '@comp/hhd/design/relation/AutoRelationMapping/AutoRelationMapping.vue';
import DetailsRelationMapping from '@comp/hhd/design/relation/DetailsRelationMapping/DetailsRelationMapping.vue';

export default {
  name: 'RelationMapping',
  computed: {
    RelationType() {
      return RelationType;
    }
  },
  components: {DetailsRelationMapping, AutoRelationMapping, ManualRelationMapping},
  props: {
    labelWidth: createProps(String),
    relation: createProps(Object, createRelation),
    formDefinition: createProps(Object, createFormDefinition),
    relationTargetFormDefinition: createProps(Object, createFormDefinition)
  }

};
</script>